<!--
 * @Author: 许警 11378748333@
 * @Date: 2025-06-04 14:33:05
 * @LastEditors: 许警 11378748333@
 * @LastEditTime: 2025-06-04 14:46:18
 * @FilePath: /hsxlsystem/src/components/common/del-wrap/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="del-wrap">
    <slot></slot>
    <div v-if="showClose" class="icon-close" :style="{ display: alwaysShow ? 'flex' : 'none' }" @click.stop="handleClose">
      <CloseOutlined :rotate="45" :style="{ marginTop: '10px', fontSize: '10px', marginLeft: '1px' }" />
    </div>
  </div>
</template>

<script>
import { CloseOutlined } from '@ant-design/icons-vue'
export default {
  props: {
    showClose: {
      type: Boolean,
      default: true
    },
    alwaysShow: {
      type: Boolean,
      default: true
    }
  },
  components: {
    CloseOutlined
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">
.del-wrap {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  &:hover > .icon-close {
    display: flex;
  }
  .icon-close {
    display: none;
    position: absolute;
    right: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    transform: rotate(-45deg);
    .icon {
      position: absolute;
      left: 1px;
      bottom: 10px;
      font-size: 10px;
      transform: rotate(-45deg);
    }
  }
}
</style>
